<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
    <link rel="manifest" href="manifest.json">
    <script>
        (function(win, doc) {
            var docEl = doc.documentElement;
            var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            recalc = function () {
                docEl.style.fontSize = (100 * docEl.clientWidth / 750) + 'px';
            }
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            recalc();
        }(window, document))
    </script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        .app {
            margin: 0.23rem;
        }
        .article-title {
            font-size: 0.4rem;
            padding: 0 0.4rem;
            text-align: center;
            margin: 0.32rem;
        }
        .article-tip {
            font-size: 0.26rem;
            color: #999999;
            text-align: right;
            padding: 0.23rem 0;
            border-bottom: 1px solid #eee;
        }
        .source {
            float: left;
        }

        .article-content {
            margin: 0.23rem 0;
            font-size: 0.3rem;
            line-height: 0.5rem;
        }

        .article-content.article-content img {
            max-width: 7.04rem;
            text-indent: 0;
        }

        .article-url {
            height: 0.1rem;
            position: relative;
            margin-bottom: 0.5rem;
            font-size: 0.23rem;
        }
        .article-url a{
            font-size: 0.23rem;
            margin: 0;
            color: #00B0FE;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="app" class="app">
        <h3 class="article-title"></h3>
        <div class="article-tip">
            <span class="time"></span>
            <span class="source"></span>
        </div>
        <div class="article-content"></div>
        <p class="article-url"><a id="url">原文地址</a></p>
    </div>
</body>
    <script src="js/jquery.min.js"></script>
    <script>
        if (navigator.serviceWorker) {
            navigator.serviceWorker.register('./sw.js').then((registration) => {
                console.log('Registered events is scope', registration.scope);
            })
        }
        (function() {
            var data = {};
            if (window.sessionStorage && sessionStorage.getItem('NEW_DETAIL')) {
                data = JSON.parse(sessionStorage.getItem('NEW_DETAIL'));
            }
            document.title = data.title;
            $('.article-title').html(data.title);
            $('.time').html(data.time);
            $('.source').html(data.src);
            $('.article-content').html(data.content);
            $('#url').attr('href', data.url);
        }())
        
    </script>
</html>